<template>
  <div class="sfzWrap" validate-first>
    <navBar title="实名认证" @onClickLeft="$router.back()" />
    <van-steps :active="show.active">
      <van-step>上传身份证</van-step>
      <van-step>等待审核</van-step>
      <van-step>审核成功</van-step>
    </van-steps>
    <!-- 第一步上传资料 -->
    <div v-if="show.active == 0">
      <div class="card-title">{{show.title}}</div>
      <div class="card-upload">
        <van-uploader :after-read="afterRead" v-model="show.frontIdCard" max-count="1" name="frontIdCard" v-if="this.show.errand_info.frontIdCard"/>
        <van-uploader :after-read="afterRead" v-model="show.backIdCard" max-count="1" name="backIdCard" v-else/>
      </div>
    </div>
    <div v-if="show.active == 1">
      <div class="card-wrap">
        <van-icon name="chat-o" />
        <div class="card-expand-title">等待审核中</div>
      </div>
    </div>
    <div v-if="show.active == 2">
      <div class="card-wrap">
        <van-icon name="passed" />
        <div class="card-expand-title">审核成功</div>
      </div>
    </div>
  </div>
</template>

<script>
import navBar from "@cb/navBar.vue";
import {Dialog} from 'vant';
import {get} from '../../../../../public/API/query'
import axios from 'axios';
import config from '../../../../../public/config';
export default {
  components: {
    navBar
  },
  data() {
    return {
      show:{
        active:0,
        errand_info:{},
        frontIdCard:[],
        backIdCard:[],
        personData:{},
        title:'请上传身份证'
      },
    }
  },
  methods: {
    afterRead(file,detail){
      file.status = 'uploading';
      let upload = new FormData();
      upload.append('image_binary',file.file);
      upload.append('app_key','4964d473aad042539fa85d98df7c2e4b');
      upload.append('app_secret','d3bbfa00bb47c3a310b6a543ab5ff800');
      axios.post('http://api.exocr.com/ocr/v1/id_card',upload).then((res) => {
        if(res){
          if(this.show.errand_info.front_id_card && res.data.result.face == 1){
            file.status = 'done'
            this.show[detail.name] = []
            Dialog({ message: '请上传身份证国徽面' });
            return false;
          }
          if(this.show.errand_info.back_id_card && res.data.result.face == 2){
            file.status = 'done'
            this.show[detail.name] = []
            Dialog({ message: '请上传身份证人脸面' });
            return false;
          }
          file.status = 'done';
          Dialog({ message: res.data.description });
          this.show[detail.name] = []
          // 识别成功后
          if(res.data.error_code == 0){
              this.show.personData = res.data;
              let files = new FormData();
              files.append('file',file.file);
              axios.post(config.get('e_url')+'v1000_upload',files).then((res) => {
                // 正脸
                if(this.show.personData.result.face == 1){
                  var data = {
                    front_id_card:res.data.data,
                    id_card_number:this.show.personData.result.idno.words,
                  }
                  this.show.title = '请上传身份证国徽面'
                }else{
                  var data = {
                    back_id_card:res.data.data
                  }
                  this.show.title = '请上传身份证人脸面'
                }
              get('realNameAuthentication',data,(res) => {
                if(res.code == 200){
                  this.getData()
                }
              })
              })
          }else{
            Dialog({ message: res.data.description });
          }
        }
      })
    },
    getData () {
      axios.get(`${config.get('bpp_url')}v1070_myIndex?token=${sessionStorage.getItem('token')}`).then((res) => {
        this.show.errand_info = res.data.data[0];
        (this.show.errand_info.front_id_card && this.show.errand_info.back_id_card)?this.show.active = 1:this.show.active = 0;
        this.$forceUpdate();
      })
    }
  },
  created() {
    // 获取个人信息
    this.getData();
  }
};
</script>
<style lang="less">
  .card-upload{
    width:100%;
    padding:20px;
    box-sizing: border-box;
    display: flex;
    justify-content:center;
    .van-uploader__upload,
    .van-uploader__preview-image
    {
      width:160px !important;
      height:160px !important;
    }
  }
  .card-title{
    text-align: center;
    font-size:16px;
    font-weight:300;
    padding:10px 0;
  }
  .card-wrap{
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top:10%;
    i{
      font-size:125px;
      color:#4e90ff;
    }
  }
  .card-expand-title{
    font-size:20px;
    font-weight:bold;
    padding-top:10px;
  }
</style>